<!-- 十大股东 -->
<template>
    <div class="container">
        <div class="table w1021">
            <div class="tableTab">
                <span
                    class="tableBtn"
                    :class="{ on: index == timeIdx }"
                    @click="onTime(item, index)"
                    v-for="(item, index) in times"
                    :key="index"
                    >{{ item }}</span
                >
            </div>
        </div>

        <div class="table w1021">
            <div class="tableTh tableTr flex">
                <span class="tableTd w90">股东名次</span>
                <span class="tableTd w350">股东名称</span>
                <span class="tableTd w130">股份类型</span>
                <span class="tableTd w130">持有数量(股)</span>
                <span class="tableTd w90 high">占总股本比例</span>
                <span class="tableTd w90">持股动向</span>
                 <span class="tableTd w90 high">变动数量(股)</span>
                 <span class="tableTd w90">变动比例</span>
                <span class="tableTd w190">变动原因</span>
            </div>
            <div class="tableTr tableBody top flex" v-for="item in tableList" :key="item.id">
                <span class="orange tableTd w90">{{ item.rank }}</span>
                <span class="orange tableTd w350">{{ item.name }}</span>
                <span class="orange tableTd w130">{{ item.shrHldType }}</span>
                <span class="orange tableTd w130">{{item.holdNum | filterValUnit}}</span>
                <span class="orange tableTd w90">{{item.holdPct | filterVal }}%</span>
                <span class="orange tableTd w90">
                    <span v-if="item.inrDecNum == '不变'" class="changeNO">{{
                        item.inrDecNum
                    }}</span>
                    <span v-else-if="item.inrDecNum == '减持'" class="reduce">{{
                        item.inrDecNum
                    }}</span>
                    <span
                        v-else-if="item.inrDecNum == '新进'"
                        class="increase"
                        >{{ item.inrDecNum }}</span
                    >
                     <span
                        v-else-if="item.inrDecNum == '增持' "
                        class="increase_l"
                        >{{ item.inrDecNum }}</span
                    >
                    <span v-else>{{ item.inrDecNum }}</span>
                </span>
                  <span class="orange tableTd w90">
                    <span v-if="item.inrDecNum == '不变'" class="changeNO">{{
                        item.inrDecNum
                    }}</span>
                    <span v-else-if="item.inrDecNum == '减持'" class="reduce">{{
                        item.addNum |filterValUnit
                    }}</span>
                    <span
                        v-else-if="item.inrDecNum == '新进'"
                        class="increase"
                        >{{ item.inrDecNum }}</span
                    >
                     <span
                        v-else-if="item.inrDecNum == '增持' "
                        class="increase_l"
                        >{{ item.addNum |filterValUnit }}</span
                    >
                    <span v-else>{{ item.inrDecNum }}</span>
                </span>
                  <span class="orange tableTd w90">
                    <span v-if="item.inrDecNum == '不变'" class="changeNO">{{
                        item.inrDecPct
                    }}</span>
                    <span v-else-if="item.inrDecNum == '减持'" class="reduce">{{
                        item.inrDecPct
                    }}</span>
                    <span
                        v-else-if="item.inrDecNum == '新进'"
                        class="increase"
                        >{{ item.inrDecPct }}</span
                    >
                     <span
                        v-else-if="item.inrDecNum == '增持' "
                        class="increase_l"
                        >{{ item.inrDecPct }}</span
                    >
                    <span v-else>{{ item.inrDecPct }}</span>
                </span>
                <span class="orange tableTd w190">{{ item.chngReasName }}</span>
            </div>
            <div
                class="tableNone orange w1021 top"
                v-if="tableList.length == 1"
            >
                暂无数据
            </div>
        </div>
    </div>
</template>
<script>
import { number, numberNo,f10changeNum } from "../../script/api";
export default {
    data() {
        return {
            tableList: [],
            timeIdx: 0,
            times: [],
        };
    },
    props: ["data"],
    filters: {
        filterVal(ops, num) {
            if (num == "num" && ops != "新进" && ops != "不变") {
                if (ops == "") return "--";
                const demo = Number((ops / 10000).toFixed(2)).toLocaleString();
                const main = demo.indexOf("-") != -1 ? demo : "+" + demo;
                return main.indexOf(".") != -1 ? main : main + ".00";
            }
            if (num == "numberNo") {
                return numberNo(ops, num);
            }
            if (typeof ops == "number") {
                return number(ops, num);
            }
            return ops ? ops : "--";
        },
         filterValUnit(ops) {
            if (typeof ops == "number") {
                return f10changeNum(ops);
            }
            return ops ? ops : "--";
        },
    },
    watch: {
        data: {
            handler(newData, oldData) {
                this.times = this.handler(newData);
                this.handtableData(newData[this.times[0]]);
            },
            immediate: true,
            deep: true,
        },
    },

    methods: {
        handler(res) {
            const times = Object.keys(res).sort((a, b) => {
                return new Date(b).getTime() - new Date(a).getTime();
            });
            return times;
        },
        onTime(time, index) {
            this.timeIdx = index;
            this.handtableData(this.data[time]);
        },
        handtableData(datalist) {
            this.tableList = [];
            let totalline = {
                rank: null,
                name: "合计",
                shrHldType: "--",
                holdNum: 0,
                holdPct: 0,
                inrDecNum: "--",
                chngReasName: "--",
            };
            if (datalist && datalist.length > 0) {
                this.tableList = datalist.map((ele) => {
                    totalline.holdPct += ele.holdPct;
                    totalline.holdNum += ele.holdNum;
                    return ele;
                });
            }

            this.tableList.push(totalline);
            console.log("tableList", this.tableList);
        },
    },
};
</script>
<style lang="scss" scoped>
.high{
    min-height:57px !important;
}
.changeNO{
    color: #999999;
}
.increase {
   color: #FF3FFD;
}
.reduce {
    color: #25ed25;
}
.increase_l{
    color: #FF1B10;
}
</style>
